<template>
	<view id="footer-bar-components" class="tl-footer-custom" :style="FooterBarStyle">
		<view id="footerBarCustom" class="azm-global-fixed-tabbar">
			<view class="footerBar-slot">
				<slot></slot>
			</view>
			<view id="fbc-tabbar">
				<view class="bg-white azm-1px-t azm-tabbar azm-safe-bottom" v-if="showTabBar">
					<view class="cu-bar tabbar">
						<view class="action" v-for="(item,index) in tabBar" :key="index" :class="{active:active_index === index}"
						 @click.stop="handleSwitchTab(item,index)">
							<block v-if="item.image" />
							<view v-else class="tabbar-icon" :class="active_index === index?item.iconActive:item.icon" />
							<view class="tabbar-text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="azm-footer-Identifier azm-safe-bottom" v-else-if="showIdentifier === true">
					<view>Copyright &#169 2008-2016 weui.io</view>
				</view>
			</view>
		</view>
		<!--分享-->
		<view class="cu-modal bottom-modal azm-share-modal" :class="{show:isShowShareModal}" @tap.stop="noop">
			<view class="cu-dialog" @tap.stop="noop">
				<!--                通过以下方式添加到公司团队-->
				<view class="share-modal-title">{{shareTitle}}</view>
				<view class="share-modal-list flex justify-center align-center">
					<block v-for="(item,index) in shareList" :key="index">
						<button class="flex-sub cu-btn" hover-class="none" @tap.stop="handleTapShareModal(index,item)" :open-type="item.tag">
							<view class="share-modal-item">
								<view v-if="item.src || item.icon" class="share-modal-icon">
									<image v-if="item.src" :src="item.src | ic_image_filter" @error="handleImageError(item,'src')" mode="aspectFill" />
									<text class="icon" :class="item.icon" v-else></text>
								</view>
								<view class="share-modal-label">{{item.label}}</view>
							</view>
						</button>
					</block>
				</view>
				<view class="share-modal-footer azm-1px-t" @tap.stop="handleCloseShareModal">取消
				</view>
				<view class="azm-safe-bottom"></view>
			</view>
		</view>
		<!--提示弹窗-->
		<view class="cu-modal azm-alert-modal" :class="{show:isShowAlertModal}" @tap.stop="noop">
			<view class="cu-dialog" @tap.stop="noop">
				<view class="cu-dialog-content">
					<view class="azm-alert-title azm-ellipsis--l1" v-if="alertOpts.title">
						<text>{{alertOpts.title}}</text>
					</view>
					<view class="azm-alert-content" :class="['text-' + alertOpts.contentAlign,{'no-title':!alertOpts.title}]" :style="[{color:alertOpts.contentColor}]">
						<!--                        <u-parse v-if="alertOpts.isHtml" :content="alertOpts.content" @preview="handleImagePreview"-->
						<!--                                 @navigate="handleNavigate"/>-->
						<rich-text v-if="alertOpts.isHtml" :nodes="alertOpts.content"></rich-text>
						<!--                        <view style="font-size: 1rpx" v-if="alertOpts.isHtml" v-html="alertOpts.content"></view>-->
						<view v-else-if="alertOpts.content">{{alertOpts.content}}</view>
					</view>
				</view>
				<view class="azm-alert-footer azm-1px-t flex align-center justify-center">
					<view class="flex-sub azm-1px-r" v-if="alertOpts.showCancel === true">
						<button class="cu-btn block azm-alert-cancel" hover-class="none" @tap.stop="handleAlertModalFail" :style="[{color:alertOpts.cancelColor}]">
							<text>{{alertOpts.cancelText || ''}}</text>
						</button>
					</view>
					<view class="flex-sub">
						<button class="cu-btn block azm-alert-confirm" hover-class="none" @tap.stop="handleAlertModalSuccess" :style="[{color:alertOpts.confirmColor}]">
							<text>{{alertOpts.confirmText || ''}}</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	const SHARE_LIST = [{
			icon: 'tlIcon-add_wechat text-green',
			label: '微信邀请',
			tag: 'share',
			show: true
		},
		{
			icon: 'tlIcon-add_interlinking text-blue',
			label: '二维码邀请',
			show: true,
		}
	];

	const Internal = {
		icon: 'tlIcon-share_people icon-share-border',
		label: '内部邀请',
		show: false
	}

	const ALERT_OPTS = {
		title: "",
		isHtml: false,
		content: "",
		showCancel: true,
		cancelText: "取消",
		confirmText: "确定",
		cancelColor: "#6B6B6B",
		confirmColor: "#0075FF",
		contentColor: "",
		contentAlign: 'left'
	}

	export default {
		components: {},
		name: "footer-bar",
		data() {
			return {
				TabBarStyle: '',
				FooterBarStyle: '',
				tabBarIconClass: '',
				isShowShareModal: false,
				isShowAlertModal: false,
				shareTitle: "",
				shareList: [...SHARE_LIST],
				alertOpts: { ...ALERT_OPTS
				},
			};
		},
		computed: {
			...mapState({
				tabBar: state => state.System.tabBar
			})
		},
		props: {
			showTabBar: Boolean,
			showIdentifier: Boolean,
			hideBottom: Boolean,
			active_index: {
				type: Number,
				default: 0
			}
		},
		created() {
			this.setTabBar()
		},
		watch: {
			isShowAlertModal(n) {
				if (n === true) {
					this.isShowShareModal = false
				}
			},
			isShowShareModal(n) {
				if (n === true) {
					this.isShowAlertModal = false
				}
			}
		},
		methods: {
			setTabBar() {
				let vm = this;
				this.$nextTick(function() {
					vm.getFooterBarHeight()
				});
			},
			getFooterBarHeight() {
				const that = this;
				const {
					object2style
				} = this.$util;
				const SelectorQuery = uni.createSelectorQuery();
				if (that.hideBottom === true) {
					that._emit({
						height: 0
					}, 'load');
					return;
				}
				SelectorQuery.in(this);
				const NodesRef = SelectorQuery
					.select('#footerBarCustom').boundingClientRect()
					.select('#fbc-tabbar').boundingClientRect();
				that.$nextTick(function() {
					NodesRef.exec(function([a, d]) {
						if (!d) return;
						that.TabBarStyle = object2style({
							height: d.height + 'px'
						});
						if (!a) return;
						that.FooterBarStyle = object2style({
							height: a.height + 'px'
						});
						that._emit(a, 'load')
					});
				})
			},
			_emit(e, t) {
				const type = e.type === 'click' ? 'tap' : e.type;
				this.$emit(`footerBar${this.firstToUpperCase(t || type)}`, e.detail || e)
			},
			firstToUpperCase(s) {
				return typeof s === "string" ? s.slice(0, 1).toUpperCase() + s.slice(1) : '';
			},
			handleSwitchTab(item, index) {
				if (this.active_index === index) {
					this._emit({
						item,
						index
					}, 'refresh')
				} else {
					this._emit({
						item,
						index
					}, 'click')
					// this.$$router.pushTab(item.path)
				}
			},

			/**
			 * 分享弹窗 start
			 * @param shareList
			 * @param isInternal 是否内部邀请
			 * @param title
			 * @param success
			 * @param fail
			 * @param complete
			 */
			openShareModal({
				shareList = [],
				isInternal = false,
				title,
				success,
				fail,
				complete
			} = {}) {
				const that = this;
				if (that.timer) clearTimeout(that.timer)
				const {
					isEmptyArray,
					isEmpty
				} = this.$util.jude;
				if (!isEmpty(title)) that.shareTitle = title;
				else that.shareTitle = "通过以下方式添加到公司团队";
				if (!isEmptyArray(shareList)) this.shareList = shareList;
				else this.shareList = [...SHARE_LIST];
				if (isInternal === true) this.shareList.push(Internal);
				this.shareMethods = {
					success,
					fail,
					complete
				};
				this.$nextTick(function() {
					this.isShowShareModal = true;
				})
			},
			handleCloseShareModal() {
				if (this.shareMethods) {
					typeof this.shareMethods.fail === "function" && this.shareMethods.fail();
				}
				this.handleCompleteShareModal()
			},
			handleCompleteShareModal(obj) {
				const that = this;
				if (this.shareMethods) {
					typeof this.shareMethods.complete === "function" && this.shareMethods.complete(obj);
				}
				this.isShowShareModal = false;
				this.shareMethods = {};
				that.timer = setTimeout(function() {
					that.shareList = [...SHARE_LIST];
				}, 500)
			},
			handleTapShareModal(index, item) {
				if (this.shareMethods) {
					typeof this.shareMethods.success === "function" && this.shareMethods.success({
						index,
						item
					});
				}
				this.handleCompleteShareModal({
					index,
					item
				})
			},
			// 分享弹窗 end

			// 提示弹窗
			openAlertModal({
				title,
				isHtml = false,
				content,
				showCancel = true,
				cancelText = "取消",
				cancelColor = "#6B6B6B",
				confirmText = "确定",
				confirmColor = "#0075FF",
				contentColor,
				contentAlign = 'left',
				success,
				fail,
				complete
			} = {}) {

				const arg = arguments[0];
				if (arg.isHtml !== true && content) {
					arg.isHtml = /<([^>\s]+)[^>]*>(.*?<\/\\1>)?/gm.test(content);
				}
				if (arg.isHtml === true) {
					content =
						`${content.replace(/([0-9]+(rpx|px))/g, function (a) {
                        const num = a.indexOf('rpx') > -1 ? Number(a.replace('rpx', '')) : Number(a.replace('px', '')) * 2;
                        return uni.upx2px(num) + 'px'
                    })}`
					arg.content = `<div style="text-align: ${contentAlign || 'left'};">${content}</div>`
				}
				this.alertOpts = { ...ALERT_OPTS
				};
				this.$util.mapKeys(arg, this.alertOpts, Object.keys(ALERT_OPTS));
				this.alertMethods = {
					success,
					fail,
					complete
				};
				this.$nextTick(function() {
					this.isShowAlertModal = true;
				})
			},
			handleCompleteAlertModal(obj) {
				this.alertMethods && typeof this.alertMethods.complete === "function" && this.alertMethods.complete(obj);
				this.isShowAlertModal = false;
				this.alertOpts = { ...ALERT_OPTS
				};
				this.alertMethods = {};
			},
			handleAlertModalSuccess() {
				this.alertMethods && typeof this.alertMethods.success === "function" && this.alertMethods.success({
					confirm: true
				});
				this.handleCompleteAlertModal({
					confirm: true
				})
			},
			handleAlertModalFail() {
				this.alertMethods && typeof this.alertMethods.fail === "function" && this.alertMethods.fail({
					cancel: true
				});
				this.handleCompleteAlertModal({
					cancel: true
				})
			},


			handleImagePreview(src, e) {
				console.log(src, e, "富文本预览图片");
			},
			handleNavigate(href, e) {
				console.log(src, e, "富文本链接跳转");
			}
			/* 提示弹窗end */

		}
	}
</script>

<style scoped lang="scss">
	.azm-tabbar .cu-bar.tabbar {
		height: 50*2upx;
		padding-bottom: 0;
	}

	.azm-alert-modal {
		transition: none;
	}

	.azm-global-fixed-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 800;

		.fbc-tabbar-canvas {
			width: 100%;
			height: auto;
			min-height: 50*2upx;
			z-index: 100;
			position: relative;
		}

		.tabbar {
			.action {
				color: $tl-tabbar-color;

				&.active {
					color: $tl-tabbar-color-active;
				}

				.tabbar-icon {
					font-size: 28*2upx;
					margin-bottom: 3*2upx;
				}

				.tabbar-text {
					height: 14*2upx;
					font-size: 10*2upx;
					font-weight: 400;
					line-height: 14*2upx;
				}
			}
		}

		.footerBar-slot {
			position: relative;
		}

		.azm-footer-Identifier {
			text-align: center;
			padding-bottom: 16*2upx;
			font-size: 12*2upx;
			color: #C8C8C8;
			line-height: 17*2upx;
		}
	}

	.azm-share-modal {
		.cu-dialog {
			border-radius: 12*2upx 12*2upx 0 0;
			min-height: 199*2upx;
			padding: 24*2upx 14*2upx 0;
			color: #fff;

			.share-modal-title {
				height: 20*2upx;
				font-size: 15*2upx;
				font-weight: bold;
				line-height: 20*2upx;
				color: #313131;
			}

			.share-modal-list {
				padding-top: 33*2upx;
				padding-bottom: 29*2upx;

				.cu-btn {
					background: transparent;
					height: auto;
					padding: 0;
					display: block;
				}

				.share-modal-icon {
					.icon {
						font-size: 61*2upx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.__image {
						width: 45*2upx;
						height: auto;
					}

					margin-bottom: 8*2upx;
				}

				.share-modal-label {
					height: 24*2upx;
					font-size: 14*2upx;
					font-weight: 400;
					color: #6B6B6B;
					line-height: 24*2upx;
				}
			}

			.share-modal-footer {
				height: 50*2upx;
				font-size: 17*2upx;
				color: #313131;
				line-height: 50*2upx;
			}
		}
	}


	.azm-alert {
		&-modal {
			.cu-dialog {
				border-radius: 12*2upx;
				width: 76.8%;
				background: #fff;

				.cu-dialog-content {
					padding: 28*2upx 0 20*2upx;
				}
			}
		}

		&-title {
			font-size: 19*2upx;
			font-weight: 500;
			color: #313131;
			line-height: 20*2upx;
			padding: 0 28*2upx 12*2upx 28*2upx;
		}

		&-content {
			font-size: 14*2upx;
			font-weight: 400;
			color: #6B6B6B;
			line-height: 24*2upx;
			padding: 0 28*2upx 0 28*2upx;

			&.no-title {
				font-size: 16*2upx;
				color: #313131;
			}
		}

		&-footer {
			height: 50*2upx;

			>.flex-sub {
				&:after {
					top: 30%;
					bottom: 30%;
				}

				.azm-alert {

					&-cancel,
					&-confirm {
						background: #fff;
						color: #6B6B6B;
						font-size: 17*2upx;
					}

					&-confirm {
						color: $tl-color-primary;
					}
				}
			}
		}
	}
</style>
